<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" width="750" :before-close="hideModal">
			<div style="position: relative; width: 619.65px; height: 1101.8px; margin: 0 auto" ref="targetRef">
				<img src="../../../../assets/lottery/bk_gonggao.png" alt="中国福利彩票" class="logo_bk" />

				<div class="content" ref="targetRef">
					<div class="r_title">
						<img src="/@/assets/lottery/num/big_title.png" alt="" class="bk_title" />
					</div>

					<div class="r_num">
						<div style="display: flex; align-items: flex-end">
							<div v-for="item in nowTime" :key="item">
								<img src="/@/assets/lottery/num/1.png" v-if="item == '1'" alt="" class="num" style="width: 27.5px" />
								<img src="/@/assets/lottery/num/2.png" v-if="item == '2'" alt="" class="num" />
								<img src="/@/assets/lottery/num/3.png" v-if="item == '3'" alt="" class="num" />
								<img src="/@/assets/lottery/num/4.png" v-if="item == '4'" alt="" class="num" />
								<img src="/@/assets/lottery/num/5.png" v-if="item == '5'" alt="" class="num" />
								<img src="/@/assets/lottery/num/6.png" v-if="item == '6'" alt="" class="num" />
								<img src="/@/assets/lottery/num/7.png" v-if="item == '7'" alt="" class="num" />
								<img src="/@/assets/lottery/num/8.png" v-if="item == '8'" alt="" class="num" />
								<img src="/@/assets/lottery/num/9.png" v-if="item == '9'" alt="" class="num" />
								<img src="/@/assets/lottery/num/0.png" v-if="item == '0'" alt="" class="num" />
								<img src="/@/assets/lottery/num/date_point.png" v-if="item == '.'" alt="" class="point" />
							</div>
						</div>

						<div style="display: flex; align-items: center; margin-top: 0px">
							<img src="/@/assets/lottery/num/week.png" alt="" class="week1" />

							<img src="/@/assets/lottery/num/day_1.png" v-if="weekDayAll == '一'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_2.png" v-if="weekDayAll == '二'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_3.png" v-if="weekDayAll == '三'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_4.png" v-if="weekDayAll == '四'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_5.png" v-if="weekDayAll == '五'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_6.png" v-if="weekDayAll == '六'" alt="" class="day" />
							<img src="/@/assets/lottery/num/day_7.png" v-if="weekDayAll == '日'" alt="" class="day" style="width: 31px; margin-left: 2px" />
						</div>
					</div>

					<div class="number_content">
						<!-- 双色球 start 每周二、四、日-->
						<div class="qihao" v-if="weekDayAll == '二' || weekDayAll == '四' || weekDayAll == '日'">
							<img src="/@/assets/lottery/logo_shuangseqiu.png" alt="" class="logo" style="width: 90px; height: 90px; margin-top: -6px" />
							<div class="qihao_text">第{{ allData['10001'][0].drawIssue }}期</div>
						</div>

						<div class="numbers" style="width: 85%" v-if="weekDayAll == '二' || weekDayAll == '四' || weekDayAll == '日'">
							<text class="red" v-for="item in allData['10001'][0].redNumSort.split(',')" :key="item">{{ item }}</text>
							<text class="blue" v-for="item in allData['10001'][0].buleNum.split(',')" :key="item">{{ item }}</text>
						</div>
						<!-- 双色球 end -->

						<!-- 七乐彩 start 每周一、三、五-->
						<div class="qihao" v-if="weekDayAll == '一' || weekDayAll == '三' || weekDayAll == '五'">
							<img src="/@/assets/lottery/logo_qilecai.png" alt="" class="logo" style="width: 100px" />
							<div class="qihao_text">第{{ allData['10003'][0].drawIssue }}期</div>
						</div>

						<div class="numbers" style="width: 85%" v-if="weekDayAll == '一' || weekDayAll == '三' || weekDayAll == '五'">
							<text
								class="red"
								style="width: 55px; height: 55px; border-width: 10px"
								v-for="item in allData['10003'][0].redNumSort.split(',')"
								:key="item"
								>{{ item }}</text
							>
							<text
								class="blue"
								style="width: 55px; height: 55px; border-width: 10px"
								v-for="item in allData['10003'][0].buleNum.split(',')"
								:key="item"
								>{{ item }}</text
							>
						</div>
						<!-- 七乐彩 end -->

						<!-- 3D start -->
						<div class="qihao" :style="{ marginTop: weekDayAll == '六' ? '50px' : '20px' }">
							<img src="/@/assets/lottery/logo_3d.png" alt="" class="logo" />
							<!-- <img src="/@/assets/lottery/bk_qihao.png" alt="" class="bk_qihao" /> -->
							<div class="qihao_text">第{{ allData['10002'][0].drawIssue }}期</div>
						</div>

						<div class="numbers" :style="{ marginTop: weekDayAll == '六' ? '30px' : '10px', gap: '10px' }">
							<text
								class="red"
								style="font-size: 30px; border-width: 12px; width: 70px; height: 70px"
								v-for="item in allData['10002'][0].redNum.split(',')"
								:key="item"
								>{{ item.replace('0', '') }}</text
							>
							<text
								class="red"
								style="font-size: 30px; border-width: 12px; width: 70px; height: 70px"
								v-for="item in allData['10002'][0].buleNum.split(',')"
								:key="item"
								>{{ item.replace('0', '') }}</text
							>
						</div>
						<!-- 3D end -->

						<!-- 快乐8 start -->
						<div class="qihao" :style="{ marginTop: weekDayAll == '六' ? '70px' : '10px', position: 'relative' }">
							<img src="/@/assets/lottery/logo_kuaile8.png" alt="" class="logo" style="width: 120px" />
							<!-- <img src="/@/assets/lottery/bk_qihao.png" alt="" class="bk_qihao" /> -->
							<div class="qihao_text" style="margin-left: -60px">第{{ allData['10005'][0].drawIssue }}期</div>
						</div>

						<div class="numbers kuaile8num" :style="{ marginTop: weekDayAll == '六' ? '40px' : '20px' }">
							<div v-for="(row, rowIndex) in getKuaile8Rows" :key="rowIndex" style="display: flex; margin-bottom: 5px; width: 100%">
								<text
									class="red"
									style="font-size: 24px; border-width: 10px; width: 55px; height: 55px; flex-shrink: 0; margin-right: 3.5px"
									v-for="item in row"
									:key="`${rowIndex}-${item}`"
								>
									{{ item }}
								</text>
							</div>
						</div>
						<!-- 快乐8 end -->
					</div>
				</div>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<div style="display: flex; margin-top: 10px; justify-content: center">
						<el-button type="success" @click="captureAndDownload()"> 生成图片 </el-button>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref, computed } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

const emit = defineEmits(['handleClose']);
const props = defineProps({
	allData: {
		type: Object,
		default: () => {},
	},
});

const nowTime = new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate();

// 引用目标元素
const targetRef = ref(null);

// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

const kuaile8Nums = ref([]);

// 将快乐8号码分成每行8个的二维数组
const getKuaile8Rows = computed(() => {
	const rows = [];
	for (let i = 0; i < kuaile8Nums.value.length; i += 8) {
		rows.push(kuaile8Nums.value.slice(i, i + 8));
	}
	return rows;
});
const weekDayAll = ref();
// 页面加载时
onMounted(() => {
	NextLoading.done();
});
import { formatDate } from '/@/utils/formatTime';
const infoDataList = ref([]);
const winNoticeDetailsVos = ref([]);
const infoData = ref({});
const dialogVisible = ref(false);
async function showModal(item) {
	dialogVisible.value = true;

	if (item) {
		infoData.value = item;

		// 2. 步骤1：将中文日期字符串转为标准格式（YYYY-MM-DD）
		// 原理：用正则替换“年”“月”为“-”，去掉“日”，并补全单数月份/日期的前导0（如“9月”→“09月”）
		console.log('🚀 ~ showModal ~  infoData.value.drawTime:', formatDate(new Date(), 'YYYY-mm-dd'));

		const standardDateStr = formatDate(new Date(), 'YYYY-mm-dd')
			.replace(/年|月/g, '-') // 替换“年”“月”为“-”，得到“2025-9-26日”
			.replace(/日/g, '') // 去掉“日”，得到“2025-9-26”
			.replace(/(\d+)-(\d+)-(\d+)/, (match, year, month, day) => {
				// 补全前导0：月份/日期小于10时加“0”（如“9”→“09”，避免Date解析错误）
				const paddedMonth = month.padStart(2, '0');
				const paddedDay = day.padStart(2, '0');
				return `${year}-${paddedMonth}-${paddedDay}`; // 最终得到“2025-09-26”
			});

		// 3. 步骤2：创建Date对象（解析标准格式日期）
		const date = new Date(standardDateStr);

		// 4. 步骤3：判断日期是否有效（避免无效日期如“2025年2月30日”）
		if (isNaN(date.getTime())) {
			console.error('日期格式错误或日期无效！', infoData.value.drawTime);
		} else {
			// 5. 步骤4：映射星期（getDay()返回0=周日，1=周一...6=周六）
			const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
			const weekDay = weekMap[date.getDay()]; // 对应“六”（2025年9月26日实际是周六）

			// 最终结果：“礼拜六”
			console.log(`当天是礼拜${weekDay}`);
			weekDayAll.value = weekDay;
			// weekDayAll.value = '一';
			// weekDayAll.value = '二';
			// weekDayAll.value = '三';
			// weekDayAll.value = '四';
			// weekDayAll.value = '五';
			// weekDayAll.value = '六';
			// weekDayAll.value = '日';
		}
	}

	console.log('🚀 ~ props.allData:', props.allData);
	console.log('🚀 ~ props.allData:', props.allData['10005']);

	if (props.allData && props.allData['10005']) {
		kuaile8Nums.value = [...props.allData['10005'][0].redNum.split(','), ...props.allData['10005'][0].buleNum.split(',')].sort((a, b) => a - b);
	}
}

function hideModal() {
	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
/* 方法3: 使用伪元素叠加实现 */
.pseudo-stroke {
	position: relative;
	display: inline-block;
	font-size: 60px;
	font-weight: bold;
	color: #ffd700;
	padding: 20px;
	border-radius: 10px;
	z-index: 1;
}

/* 方法2: 使用SVG滤镜实现更精确的圆滑描边 */
.svg-stroke-container {
	display: inline-block;
	font-size: 60px;
	font-weight: bold;
	color: #ffd700;
	padding: 20px;
	border-radius: 10px;
	filter: url(#smoothStroke);
}

.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.logo_bk {
	position: absolute;
	top: 0;
	left: 0;
	width: 619.65px;
	height: 1101.8px;
	z-index: 888;
	margin: 0 auto;
}

.content {
	position: relative;
	z-index: 999;

	width: 619.65px;
	height: 1101.8px;
	// background: url(../../../../assets/lottery/bk_gonggao.png);
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	font-family: 'SourceHanSansCN-Heavy';
}

.r_title {
	position: relative;
	margin-top: 80px;
	width: 100%;
}

.week {
	// color: #ffcc00; /* 文字主体颜色（如金色） */
	/* 文字描边：宽度2px，颜色#996600（深棕/金色描边色） */
	-webkit-text-stroke: 3px #4d1d01;
	/* 多层文字阴影：模拟立体轮廓（可根据需要调整偏移、模糊、颜色） */
	// text-shadow: 1px 1px 0 #fff, /* 右下阴影 */ -1px -1px 0 #fff, /* 左上阴影 */ 1px -1px 0 #fff, /* 右上阴影 */ -1px 1px 0 #fff; /* 左下阴影 */

	/* 背景渐变 */
	background: linear-gradient(to bottom, #ffe1b4, #f6c137);

	/* 关键：将背景裁剪到文字 */
	-webkit-background-clip: text;
	background-clip: text;

	/* 文字透明，让背景渐变显示出来 */
	color: transparent;
	font-weight: 800;
}

.title_text {
	font-size: 58px;
	/* 文字大小 */
	font-weight: bold;
	/* 文字加粗 */
	letter-spacing: 7px;
}

.title {
	width: 100%;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);

	// color: #ffcc00; /* 文字主体颜色（如金色） */
	/* 文字描边：宽度2px，颜色#996600（深棕/金色描边色） */
	-webkit-text-stroke: 3px #4d1d01;
	/* 多层文字阴影：模拟立体轮廓（可根据需要调整偏移、模糊、颜色） */
	// text-shadow: 1px 1px 0 #fff, /* 右下阴影 */ -1px -1px 0 #fff, /* 左上阴影 */ 1px -1px 0 #fff, /* 右上阴影 */ -1px 1px 0 #fff; /* 左下阴影 */

	/* 背景渐变 */
	background: linear-gradient(to bottom, #ffe1b4, #f6c137);

	/* 关键：将背景裁剪到文字 */
	-webkit-background-clip: text;
	background-clip: text;

	/* 文字透明，让背景渐变显示出来 */
	color: transparent;
	z-index: 2;
}

.title_shadow {
	width: 100%;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0%);

	z-index: 1;
	// color: #ffcc00; /* 文字主体颜色（如金色） */
	/* 文字描边：宽度2px，颜色#996600（深棕/金色描边色） */
	-webkit-text-stroke: 7px #fff;
}

.number_content {
	background-color: white;
	margin-top: 10px;
	width: 85%;
	height: 700px;
	border-radius: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;
}

.qihao {
	display: flex;

	.logo {
		width: 90px;
		height: 80px;
		position: relative;
		z-index: 99;
	}

	.bk_qihao {
		width: 400px;
		height: 80px;
		margin-left: -30px;
	}

	.qihao_text {
		width: 400px;
		height: 80px;
		margin-left: -30px;
		background: url(../../../../assets/lottery/bk_qihao.png);
		background-size: 100% 100%;

		display: flex;
		align-items: center;

		font-size: 28px;
		color: #000;
		font-weight: bold;
		padding-left: 70px;
		padding-bottom: 7px;
	}
}

.numbers {
	display: flex;
	color: #000;
	font-size: 24px;
	gap: 3px;
	margin-top: 20px;
	width: 90%;
	display: flex;
	text-align: center;
	justify-content: center;

	text {
		border-radius: 100px;
		width: 60px;
		height: 60px;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.red {
		border: 11px solid #ce040e;
	}

	.blue {
		border: 11px solid #3d46fa;
	}
}

.bk_title {
	width: 80%;
	height: auto;
}

.r_num {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.num {
	width: 30px;
	height: auto;
}

.point {
	width: 18px;
	height: auto;
}

.week1 {
	width: 84px;
	height: auto;
}

.day {
	width: 42px;
	height: auto;
}

.kuaile8num {
	gap: 3.5px;
	margin-top: 20px;
	flex-wrap: wrap;
	justify-content: start;
	margin-left: 10px;
}
</style>
